import React from 'react';
import "./index.less"
import { Stepper, Checkbox, List } from 'antd-mobile';
import TabBarExample from 'components/tabBar'
import TopBarExample from 'components/topBar'
const CheckboxItem = Checkbox.CheckboxItem;

export default class ShopCart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bgColor:'',
            val: 0,
            dataList: [
                {
                    id: 0,
                    name: '青春严选',
                    price: {
                        total: 12,
                        remove: 5,
                    },
                    goodList: [1, 2, 3, 4, 5, 6],
                },
                {
                    id: 0,
                    name: '青春严选',
                    price: {
                        total: 12,
                        remove: 5,
                    },
                    goodList: [1, 2, 3],
                },
            ]
        }
    }

    componentDidMount() {
    }


    onChange = (val) => {
        console.log(val);
        // this.setState({ val });
    }

    addVConsolePackage = () => {
        console.log(this)
        // 点击顶部左侧按钮
        // this.setState(prevState => ({ ticketId: prevState.ticketId + 1 }));
        this.setState({
            ticketId: 213
        })
    };

    // 去查看详情
    goDetail = (id) => {
        this.props.history.push({pathname:'/classify/good/detail/', state:{id:123, shopCar: true}})
    };


    // 立即购买
    nowPay = (id) => {
        this.props.history.push({pathname:'/classify/good/payOrder/', state:{id:123}})
    };


    render() {
        let { ticketId } = this.state;
        return (
            <div className="shopCart">
                <TopBarExample title={'购物车'}></TopBarExample>
                <div className="home-content">
                    {
                        this.state.dataList.map((res, index) => {
                            return <div className="good-item" key={index}>
                                <div className="good-item-title">
                                    <CheckboxItem key={index} onChange={() => this.onChange(index)}>
                                        <div className="good-img">
                                            {res.name}
                                        </div>
                                    </CheckboxItem>
                                </div>
                                {
                                    res.goodList.map((res, index) => {
                                        return <div key={index} className="good-item-content">
                                            <CheckboxItem key={index} onChange={() => this.onChange(index)}></CheckboxItem>
                                            <div className="content-self" onClick={this.goDetail}>
                                                <div className="content-self-l">
                                                    <img
                                                        src={`https://zos.alipayobjects.com/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png`}
                                                        alt=""
                                                        style={{ width: '100px', height: '100px',}}
                                                        onLoad={() => {
                                                            // fire window resize event to change height
                                                        }}
                                                    />
                                                </div>
                                                <div className="content-self-r" style={{color: '#b2b2b2'}}>
                                                    <div className="content-self-r-title">加厚加厚加厚加厚加厚加厚加厚加厚加厚加厚厚加厚加厚加厚加厚加厚加厚加厚加厚</div>
                                                    <div className="content-self-r-info">
                                                        <div className="price" style={{color: '#ff901a'}}>99</div>
                                                        <Stepper
                                                            style={{ width: '50px', minWidth: '100px' }}
                                                            showNumber
                                                            max={10}
                                                            min={1}
                                                            value={this.state.val}
                                                            onChange={this.onChange}
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    })
                                }
                                <div className="foot-content">
                                    <div className="left">
                                        <div className="left-1">
                                            <span style={{fontWeight: 600, marginRight: '10px'}}>合计</span>
                                            <span style={{color: '#ff901a'}}>788.00</span>
                                        </div>
                                        <div className="left-2" style={{color: '#b2b2b2', fontSize: '12px'}}>
                                            <span style={{ marginRight: '10px'}}>共省10</span>
                                            {/*<span style={{color: '#34d4a1'}}>查看详情</span>*/}
                                        </div>
                                    </div>
                                    <div className="right" onClick={this.nowPay}>
                                        去结算
                                    </div>
                                </div>
                            </div>
                        })
                    }
                </div>
                <TabBarExample selectedTab={'shopCart'}></TabBarExample>
            </div>
        );
    }
}

